<template>
    <div class="invoiceAnce">
        <div class="headerBox">
            <van-icon size=".48rem" color="#000000" name="arrow-left" style="margin-left: .15rem;"
                @click="backClick()" />
            <van-icon size=".48rem" color="#000000" name="cross" style="margin-left: .15rem;" />
            <span class="title-span">电子发票</span>
            <img class="bgImg" src="../../../assets/images/invoice/issuance01.png" alt="">
        </div>
        <div class="tab-div">
            <img src="../../../assets/images/invoice/ace201.png" alt="">
        </div>
        <div class="timeDiv">
            <img src="../../../assets/images/invoice/ane02.png" alt="">
        </div>
        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace203.png" alt="">
                <button>查看</button>
                <button>退票</button>
            </div>
        </div>
        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace204.png" alt="">
                <button>查看</button>
                <button>退票</button>
            </div>

        </div>
        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace202.png" alt="">
                <button>查看</button>
                <button>退票</button>
            </div>

        </div>


        <div class="cardDiv">
            <div class="itemDiv">
                <img src="../../../assets/images/invoice/ace202.png" alt="">
                <button>查看</button>
                <button>退票</button>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    name: 'invoiceAnce',
    data() {
        return {}
    },
    methods: {
        kaijuBtn() {
            this.$router.push("/invoiceIssuance");
        },
        backClick() {
            this.$router.push("/home");

        }
    }
}
</script>
<style lang="less" scoped>
.invoiceAnce {
    width: 100%;
    height: 100%;
    overflow: auto;
    overflow-x: hidden;

    .headerBox {
        width: 100%;
        height: .88rem;
        line-height: .88rem;
        background: linear-gradient(180deg, #E2F0FF 0%, #F7F8F9 100%);

        .title-span {
            font-weight: bold;
            font-size: 0.36rem;
            color: #000;
            margin-left: 1.66rem;
        }

        img.bgImg {
            width: 2.36rem;
            height: 2.61rem;
            position: absolute;
            right: 0;
        }
    }

    .tab-div {
        width: 100%;
        position: relative;

        img {
            width: 100%;
        }
    }

    .timeDiv {
        width: 100%;
        height: auto;
        margin: 0 0.3rem 0 0.3rem;

        img {
            width: 6.15rem
        }
    }

    .txtP {
        width: auto;
        height: auto;
        font-size: 0.28rem;
        color: #333333;
        margin-left: .4rem;
        margin-top: 0.42rem;
        margin-bottom: 0.2rem;
        font-weight: normal;
    }



    .cardDiv {
        width: auto;
        height: auto;
        margin: 0 0.3rem;
        position: relative;

        .itemDiv {
            width: 100%;

            button {
                width: 1.2rem;
                height: 0.56rem;
                background: white;
                border-radius: 0.1rem;
                font-size: 0.26rem;
                color: #2892FF;
                border: 0.02rem solid #2892FF;
                position: absolute;
                top: 0.28rem;
                    right: 0.3rem;
            }
                        button:last-child{
                            top: 1.04rem;
                            right: 0.3rem;
                        }

            img {
                width: 100%;
            }
        }

    }
}
</style>
